<template>
  <div>
    mes1:{{ mes1 }} num:{{ num }}==={{ num1 }}
    周浩宇真的帅
    {{ $store.state.num }}
    <br />
    getters:
    {{ $store.getters.num }}
    <br />
    <button @click="btn">按钮</button>
    <button @click="btn1">按钮异步</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data () {
    return {
      mes: 'd'
    }
  },
  // computed: mapState({
  //   num: (state) => state.num
  // }),
  computed: {
    ...mapGetters(['num']),
    // ...mapState(['num']), 自己研究的
    ...mapState({
      // 官方推荐的
      num: (state) => {
        return state.num
      },
      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      num1 (state) {
        return state.num1
      }
    }),
    mes1 () {
      return this.mes
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
    },
    btn () {
      this.$store.commit('numFn', '1', '2')
    },
    btn1 () {
      this.$store.dispatch('numFnSync', '1', '2')
      /*
        this.$store.state.num
        this.$store.getters.num
        this.$store.commit('函数名',传递的参数)
        this.$store.dispatch('异步函数名',传递的参数)
      */
    }
  }
}
</script>

<style></style>
